.films
  width: 100%
  height: 100%
  overflow: hidden
  overflow-y: auto

  @mixin nowrap
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis

  .tabs
    height: 50rem
    border-bottom: 1rem solid #eee
    display: flex
    align-items: center
    top: 0
    left: 0
    background: var(--bg-white)
    a
      flex: 1
      line-height: 50rem
      text-align: center
      color: var(--color-black)
      font-size: 14rem
      position: relative
      &::after
        content: ''
        position: absolute
        left: 25%
        bottom: 0
        height: 2rem
        width: 50%
        background: var(--bg-active)
        z-index: 2
        display: none
        animation: 0.3s ease
      &:first-child::after
        animation-name: displacement-left
      &:last-child::after
        animation-name: displacement-right
    .active
      color: var(--color-active)
      &::after
        display: block
  .sticky
    position: sticky
  .content
    background: var(--bg-base)
    overflow: hidden
    min-height: calc(100% - 50rem)
    .item
      padding: 15rem
      display: grid
      grid-template-columns: 66rem auto 50rem
      grid-template-rows: 28rem 21rem 19.5rem 25.5rem
      grid-column-gap: 10rem
      background: var(--bg-white)
      margin-bottom: 1rem
      font-size: 13rem
      color: var(--color-white)
      align-items: center
      animation: films-enter-opacity 0.5s ease
      img
        width: 66rem
        height: 94rem
        object-fit: cover
        grid-row: 1 / span 4
        border-radius: 4rem
      button
        grid-row: 1 / span 4
        grid-column: 3 / 4
        height: 25rem
        border: 1rem solid
        outline: none
        border-radius: 2rem
        background: none
      .nowPlaying
        border-color: var(--bdc-active)
        color: var(--color-active)
      .comingSoon
        border-color: var(--bdc-yellow)
        color: var(--color-yellow)
      .actors,
      .title
        @include nowrap;
      .title
        padding-top: 6rem
        font-size: 16rem
        color: var(--color-black)
        display: flex
        align-items: center
        line-height: 22rem
        span
          font-size: 9rem
          padding:  1rem 2rem
          line-height: 11rem
          background: var(--bg-grey)
          color: var(--color-supwhite)
          margin-left: 5rem
      .time
        padding-bottom: 6rem
      .grade
        span
          font-size: 14rem
          color: var(--color-yellow)
          margin-left: 5rem

